<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<div>
				<el-button v-perms="['product.product/addProductCate']" type="primary" class="mb-4" @click="handleAdd()">
					<template #icon>
						<icon name="el-icon-Plus" />
					</template>
					<span>新增分类</span>
				</el-button>
			</div>
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="80" />
				<el-table-column label="分类名称" prop="name" min-width="160" />
				<el-table-column label="分类图片" prop="icon" min-width="160" >
					<template #default="{ row }">
						<image-contain
                            v-if="row.icon"
                            :src="row.icon"
                            :width="60"
                            :height="45"
                            :preview-src-list="[row.icon]"
                            preview-teleported
                            fit="contain"
                        />
					</template>
				</el-table-column>
				<el-table-column label="业务流程" min-width="160">
					<template #default="{ row }">
						<span v-for="(item,index) in row.business_stage" :key="'business_stage'+index">
							<span>{{item.name}}</span>
							<span v-if="index<row.business_stage.length-1">{{ ` --> ` }}</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="渠道费最高（%）" prop="commission_upper_limit" min-width="150">
					<template #default="{ row }">
						<span>{{ (row.commission_upper_limit * 10000 / 100).toFixed(2) }}%</span>
					</template>
				</el-table-column>
				<el-table-column label="渠道费最低（元）" prop="commission_lower_limit" min-width="150">
					<template #default="{ row }">
						<span>{{ row.commission_lower_limit }}元</span>
					</template>
				</el-table-column>
				<el-table-column label="备注" prop="name" min-width="160" />
				<el-table-column label="启用状态" min-width="160">
					<template #default="{ row }">
						<span v-if="row.is_enable == 1">启用</span>
						<span v-if="row.is_enable == 0" style="color:red;">停用</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160" fixed="right">
					<template #default="{ row }">
						<el-button v-perms="['product.product/editProductCate']" type="primary" link @click="handleEdit(row)">编辑</el-button>
						<el-button v-perms="['product.product/deleteProductCate']" type="danger" link @click="handleDelete(row.id)">删除</el-button>
						<el-switch v-perms="['product.product/updateProductCateStatus']" v-model="row.is_enable" :active-value="1" :inactive-value="0" @change="changeStatus($event, row.id)" />
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
	</div>
</template>
<script lang="ts" setup name="productCateLists">
	import { productCateLists, productCateDelete, productCateStatus, productCate } from '@/api/product/product';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import EditPopup from './edit.vue';
	import { shallowRef } from 'vue';
	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
	const showEdit = ref(false)
	const handleAdd = async (id?: number) => {
	    showEdit.value = true
	    await nextTick()
	    if (id) {
	        editRef.value?.setFormData({
	            pid: id
	        })
	    }
	    editRef.value?.open('add')
	}
	
	const handleEdit = async (data: any) => {
	    showEdit.value = true
	    await nextTick()
	    editRef.value?.open('edit')
	    editRef.value?.getDetail(data)
	}
	
	const queryParams = reactive({})

	const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: productCateLists,
		params: queryParams
	})

	const changeStatus = async (is_enable : any, id : number) => {
		await feedback.confirm(is_enable == 0?"停用之后，用户将不能看到该产品分类，是否确认停用？":is_enable == 1?"启用之后，用户可看到该产品分类，是否确认启用？":'').then(async()=>{
			try {
				await productCateStatus({ id, is_enable })
				getLists()
			} catch (error) {
				getLists()
			}
		}).catch(()=>{
			getLists()
		});
	}

	const handleDelete = async (id : number) => {
		await feedback.confirm('确定删除该产品分类？')
		await productCateDelete({ id })
		getLists()
	}

	onActivated(() => {
		getLists()
	})

	getLists()
</script>